<template>
  <div class="content">
    <div class="hos_produce_content">
      <ul class="tab_order clearfloat f15 color_333">
        <li><span class="on" v-show="allFlag" @click="tabshow('all')">全部</span></li>
        <li><span v-show="!allFlag" @click="tabshow('all')">全部</span></li>
        <li><span class="on" v-show="doFlag" @click="tabshow('do')">进行中</span></li>
        <li><span v-show="!doFlag" @click="tabshow('do')">进行中</span></li>
        <li><span class="on" v-show="successFlag" @click="tabshow('success')">已完成</span></li>
        <li><span v-show="!successFlag" @click="tabshow('success')">已完成</span></li>
        <li><span class="on" v-show="closeFlag" @click="tabshow('close')">已关闭</span></li>
        <li><span v-show="!closeFlag" @click="tabshow('close')">已关闭</span></li>
      </ul>
    </div>

    <div class="current_content">
      <div v-for="val in orderArr" class="current_list mt20">
        <div class="order_current f15 color_333">
          <span>订单号:{{val.orderId}}</span>
        </div>
        <div class="order_inform">

          <span v-if="val.orderStatus == '3'">已关闭</span>
          <span v-else-if="val.orderStatus == '1'">进行中</span>
          <span v-else-if="val.orderStatus == '2'">已完成</span>

          <div v-else-if="val.orderStatus == '1'" class="time_content">
            <i class="iconfont icon time_icon"></i>
            53:00
          </div>

        </div>
        <table class="current_message f14">
          <tbody>
          <tr>
            <th>拍摄门店:</th>
            <td>{{val.shopName}}</td>
          </tr>
          <tr>
            <th>预约时间:</th>
            <td>{{val.orderTime | timeFilter}}</td>
          </tr>
          <tr>
            <th>门店号码:</th>
            <td>{{val.shopTel}}</td>
          </tr>
          <tr>
            <th>就发票服务:</th>
            <td>暂未开启发票</td>
          </tr>
          <tr>
            <th>拍摄套餐:</th>
            <td>形象套餐</td>
          </tr>
          </tbody>
        </table>
        <p>总计:<b>{{val.money}}元</b></p>
        <div class="mc_bottom f12 color_333 bt" v-if="val.orderStatus == '3'">
          <span class="btn_click btn_qxyy" @click="tuihao()">重新预约</span>
        </div>
        <div class="mc_bottom f12 color_333 bt" v-else-if="val.orderStatus == '2'">
        </div>
        <div class="mc_bottom f12 color_333 bt" v-else-if="val.orderStatus == '1'">
          <span class="btn_click btn_green" @click="payOrder(val.orderId, openId, val.money)">去付款</span>
          <span class="btn_click btn_qxyy mr20" @click="cancelOrder(val.orderId)">取消预约</span>
          <span class="btn_click btn_qxyy mr20" @click="tuihao()">付款帮助</span>
        </div>
      </div>


      <!--<div class="current_list mt20">
        <div class="order_current f15 color_333">
          <span>订单号:2018121232906716</span>
        </div>
        <div class="order_inform">
          <span>已关闭</span>
        </div>
        <table class="current_message f14">
          <tbody>
          <tr>
            <th>拍摄门店:</th>
            <td>厦门店</td>
          </tr>
          <tr>
            <th>预约时间:</th>
            <td>2018-04-10  12:45</td>
          </tr>
          <tr>
            <th>门店号码:</th>
            <td>1234445566</td>
          </tr>
          <tr>
            <th>就发票服务:</th>
            <td>暂未开启发票</td>
          </tr>
          <tr>
            <th>拍摄套餐:</th>
            <td>形象套餐</td>
          </tr>
          </tbody>
        </table>
        <p>总计:<b>359元</b></p>
        <div class="mc_bottom f12 color_333 bt">
          <span class="btn_click btn_qxyy">重新预约</span>
        </div>
      </div>-->


      <!--<div class="current_list mt20">
        <div class="order_current f15 color_333">
          <span>订单号:2018121232906716</span>
        </div>
        <div class="order_inform">
          <span>已完成</span>
        </div>
        <table class="current_message f13">
          <tbody>
          <tr>
            <th>拍摄门店:</th>
            <td>厦门店</td>
          </tr>
          <tr>
            <th>预约时间:</th>
            <td>2018-04-10  12:45</td>
          </tr>
          <tr>
            <th>门店号码:</th>
            <td>1234445566</td>
          </tr>
          <tr>
            <th>就发票服务:</th>
            <td>暂未开启发票</td>
          </tr>
          <tr>
            <th>拍摄套餐:</th>
            <td>形象套餐</td>
          </tr>
          </tbody>
        </table>
        <p>总计:<b>359元</b></p>
      </div>-->
    </div>


    <TarBar index="3"/>
  </div>
</template>

<script>
  import SxOrderRecordApi from '@/api/manage/SxOrderRecordApi';
  import _ from 'lodash'
  import TarBar from '@/components/TarBar'
  import '@/utils/rem'

  export default {
    components: {
      TarBar
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'gray',
          0: 'danger'
        }
        return statusMap[status]
      },
      validFilter(status) {
        const statusMap = {
          1: '有效',
          0: '作废'
        }
        return statusMap[status]
      },
      timeFilter(time) {
        if (time) {
          return new Date(time).Format('yyyy-MM-dd hh:mm:ss')
        } else {
          return ''
        }
      }
    },

    data() {
      return {
        listQuery: {
          shopArea: ''
        },
        openId: '',
        orderArr: [],//订单数据Arr
        allOrderArr: [],//订单所有数据Arr
        allFlag: true,//全部tab显示位置
        doFlag: false,//进行中tab显示位置
        successFlag: false,//完成tab显示位置
        closeFlag: false,//关闭tab显示位置
      }
    },
    mounted() {
      this.openId = this.$route.query.openId
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        let that = this;
        this.$http.all([SxOrderRecordApi.findList(this.listQuery)])
          .then(this.$http.spread(function (perms) {
            that.orderArr = perms;
            that.allOrderArr = perms;
            that.orderStatusChange;
            console.log(that.orderArr);
          }));
      },
      cancelOrder(param) {

        let that = this;
        let tempData = {};
        this.$set(tempData, 'orderStatus', '3');
        this.$set(tempData, 'orderId', param);
        SxOrderRecordApi.update(tempData).then(() => {
          this.$message({
            title: '成功',
            message: '取消预约',
            type: 'success',
            duration: 1000,
            onClose() {
              that.fetchData();
            }
          })
        })

      },

      /**
       * 支付
       * @param orderId 订单ID
       */
      payOrder(orderId, openId, money) {

        let that = this;

        money = '1';
        openId = 'oy6ge1GAkcnQ4m90nao1bJ-hCMnU'

        let tempData = {
          "totalFee": money,
          "openid": openId,
          "orderId": orderId
        };

        SxOrderRecordApi.unifiedOrder(tempData).then((json) => {
          that.json = json;
          if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady',
                that.onBridgeReady, false);
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady',
                that.onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady',
                that.onBridgeReady);
            }
          } else {
            that.onBridgeReady();
          }
        })
      },

      onBridgeReady() {
        let that = this;
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            "appId": this.json.appId,     //公众号名称,由商户传入
            "timeStamp": this.json.timeStamp,//时间戳,自1970年以来的秒数
            "nonceStr": this.json.nonceStr, //随机串
            "package": this.json.package,
            "signType": this.json.signType,//微信签名方式：
            "paySign": this.json.paySign //微信签名
          },
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              this.$message({
                message: '支付成功',
                type: 'success',
                duration: 1000,
                onClose() {
                  that.tabshow('success')
                }
              });
            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
              this.$message({
                message: '支付失败',
                type: 'warning',
                duration: 1000
              });
            } else if (res.err_msg == "get_brand_wcpay_request:fail") {
              this.$message({
                message: '支付失败',
                type: 'warning',
                duration: 1000
              });
            }
          });
      },

      tabshow(param) {
        if (param == 'all') {
          this.allFlag = true;
          this.doFlag = false;
          this.successFlag = false;
          this.closeFlag = false;
        } else if (param == 'do') {
          this.allFlag = false;
          this.doFlag = true;
          this.successFlag = false;
          this.closeFlag = false;
        } else if (param == 'success') {
          this.allFlag = false;
          this.doFlag = false;
          this.successFlag = true;
          this.closeFlag = false;
        } else if (param == 'close') {
          this.allFlag = false;
          this.doFlag = false;
          this.successFlag = false;
          this.closeFlag = true;
        }
        this.orderStatusChange();
      },
      orderStatusChange() {
        let _sel = this;
        let tempArr = [];
        _.forEach(this.allOrderArr, function (obj, i) {
          if (_sel.doFlag) {
            if (obj.orderStatus == '1') {
              tempArr.push(obj);
            }
          } else if (_sel.successFlag) {
            if (obj.orderStatus == '2') {
              tempArr.push(obj);
            }
          } else if (_sel.closeFlag) {
            if (obj.orderStatus == '3') {
              tempArr.push(obj);
            }
          } else {
            tempArr.push(obj)
          }
        });
        this.orderArr = tempArr;
      }
    }
  }
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/reset.css";
  @import "../../assets/css/order_gift.css";
  @import "../../assets/css/index_appointment.css";
</style>
